<template>
  <div class="home">
    <router-view></router-view>
    <router-view></router-view>
    <!-- 头部 -->
    <div class="header">
      <div class="Top-icon">
      <van-icon name="arrow-left" @click="returnq" />
      <van-icon name="wap-home-o" @click="readeci"/>
      </div>
      <div class="bottom-img">
        <big><img src="../assets/logo.jpg" alt=""></big>
        <small></small>
        <div>
          <p></p>
          <p></p>
        </div>
      </div>
    </div>
    <!-- 宫格 -->
  <div class="content">
  <van-grid :border="false" :gutter="10" :column-num="2" class="Gongge">
    <van-grid-item @click="$router.push('/home/cust')">
      <img src="../assets/图标/我的客户.png" alt="">
      <h3>我的客户</h3>
      <p>MY CLIENTS</p>
  </van-grid-item>
   <van-grid-item @click="$router.push('/home/Seelist')">
     <img src="../assets/图标/客户关怀.png" alt="">
     <h3>客户关怀</h3>
      <p>MY CLIENTS</p>
  </van-grid-item>
   <van-grid-item @click="$router.push('/home/Center')">
     <img src="../assets/图标/消息中心.png" alt="">
     <h3>消息中心</h3>
      <p>MY CLIENTS</p>
  </van-grid-item>
   <van-grid-item @click="$router.push('/home/poputer')">
     <img src="../assets/图标/物流单.png" alt="">
     <h3>物流单</h3>
      <p>MY CLIENTS</p>
  </van-grid-item>
   <van-grid-item @click="$router.push('/home/EOEvaluation')">
     <img src="../assets/图标/物流单.png" alt="">
     <h3>快递单评价</h3>
      <p>MY CLIENTS</p>
  </van-grid-item>
</van-grid>
    </div>
    <!-- 消息圆球 -->
    <div class="Pellet">
    <a href="#">
     <van-icon name="chat-o" />
     <p>联系</p>
    </a>
    </div>
    <!-- 底部 --> 
<div class="base">
<van-tabbar v-model="active" class="active">
  <van-tabbar-item icon="wap-home">系统中心</van-tabbar-item>
  <van-tabbar-item icon="manager" @click="$router.push('/personcentre')">个人中心</van-tabbar-item>
</van-tabbar>

    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      active: 0,
    
    };
  },
  methods:{
    readeci(){
      this.$router.push('/register')
    },
    returnq(){
      this.$router.push('/register-index')
    }
  }
};
</script>
<style lang="less">
//头部
a{
 text-decoration: none;
 color:#333;
}
.header {
  // height: 1.75rem;
  background-color:RGB(0,51,153);
  padding:0 0.1rem;
//字体文字
.Top-icon {
  display: flex;
  justify-content: space-between;
 .van-icon{
  font-size: 0.40rem;
  color: #fff;
  margin-top: 0.35rem;
  margin-bottom: 0.1rem;

}}
//图片
.bottom-img{
  padding-bottom: 0.5rem;

img{
     padding-left: 10%;
    width: 82vw;
    height: 10vh;

}
} 
}
// 宫格
.content{
  background-color: RGB(245,245,245);
   padding:0.28rem 0.385rem 0.4rem 0.385rem;
  .van-grid-item{
  
    img{
        width: .75rem;
      height: .75rem;
      margin-bottom: 0.1rem;
    }
  }
  .van-grid-item{
  height: 1.9rem;
  }
}
// 圆球
.Pellet{
  width: 0.71rem;
  height: 0.71rem;
  border-radius: 50%;
  background-color: RGB(255,204,51);
  position: fixed;
  right: 42%;
  top: 86%;
  font-size: 0.2rem;
  border: 0.08rem solid RGB(245,245,245);
  z-index: 9;
  .van-icon{
    margin: 0.1rem 0 0 0.22rem;
   color: #fff;
   font-size: 0.3rem;
  }
  p{
    text-align: center;
    color: #fff;
  }
}
//底部导航
.base{
  .active{
    height: 0.7rem;
    .van-icon{
      font-size: 0.35rem;
    }
    .van-tabbar-item__text{
      font-weight:bold;
    }
  }
}
</style>